<template>
    <div class="conscientiously defaultBackground" v-if="pageData">
        <div class="data-banner clear">
            <p>兢兢业业</p>
            <p>TOP3</p>
            <p>医工</p>
        </div>
        <div class="cards has-three-card clear">
            <div class="card-con card-1">
                <div class="name">{{pageData.prizeA.fix1}}</div>
                <div class="cont">
                    <b>{{pageData.prizeA.prize1}}</b><br />
                    <span>{{pageData.prizeA.description1}}</span>
                    <p>{{pageData.prizeA.twice_1}}</p>
                </div>
            </div>
            <div class="card-con card-2">
                <div class="name">{{pageData.prizeB.fix2}}</div>
                <div class="cont">
                    <b>{{pageData.prizeB.prize2}}</b><br />
                    <span>{{pageData.prizeB.description2}}</span>
                    <p>{{pageData.prizeB.twice_2}}</p> <br />

                </div>
            </div>
            <div class="card-con card-3">
            <div class="name">{{pageData.prizeC.fix3}}</div>
            <div class="cont">
                <b>{{pageData.prizeC.prize3}}</b><br />
                <span>{{pageData.prizeC.description3}}</span>
                <p>{{pageData.prizeC.twice_3}}</p>
            </div>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
    export default {
        props: {
            pageData: {
                type: [Array, Object]
            }
        },
        data () {
            return {}
        },
        mounted () {
        },
        components: {},
        watch: {
            pageData: function (n, o) {
            }
        }
    }
</script>
<style lang='scss' rel="stylesheet/scss">
    .conscientiously{
        .data-banner{
            margin-top: 7rem;
        }
        .cards{
            .card-con{
                width: 23rem;
                height: 30rem;
                background-repeat: no-repeat;
                background-position: center top;
                text-align: center;
                background-size: 100% 100%;
                overflow: hidden;
                .name{
                    font-size: 2.5rem;
                    margin-top: 11rem;
                }
                .cont{
                    font-size: 1.6rem;
                    margin-top: 1rem;
                    >b{
                        font-size: 3.8rem;
                        display: inline-block;
                        margin: 5% 0 0 0;
                        letter-spacing: 5px;
                    }
                    >span{
                        font-size: 1.9rem;
                    }
                    >p{
                        font-size: 1.5rem;
                        margin: 5% 0 0 0;
                    }
                }
            }
            .card-1{
                background-image: url("../../assets/images/card-bg-1.png");
                margin: 7% auto 0 auto;
                opacity: 0;
            }
            .card-2{
                background-image: url("../../assets/images/card-bg-2.png");
                opacity: 0;
            }
            .card-3{
                background-image: url("../../assets/images/card-bg-3.png");
                opacity: 0;
                animation-fill-mode: forwards;
            }
        }
        .has-two-card{
            .card-2{
                margin: 10rem auto 0 auto;
            }
        }
        .has-three-card{
            width: 90%;
            height: 64%;
            margin: 0 auto;
            .card-2{
                float: left;
                margin-top: 3rem;
            }
            .card-3{
                float: right;
                margin-top: 3rem;
            }
        }
    }
    .showCurrentPageModule{
        .cards{
            .card-1{
                animation: defaultOpacityAni 0.2s linear 0.2s;
                animation-fill-mode: forwards;
            }
            .card-2{
                animation: defaultOpacityAni 0.2s linear 0.4s;
                animation-fill-mode: forwards;
            }
            .card-3{
                animation: defaultOpacityAni 0.2s linear 0.6s;
                animation-fill-mode: forwards;
            }
        }
    }
</style>